<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style>
<!--
.appmsg {
	background-color: rgb(255, 255, 255); border: 1px solid rgb(211, 211, 211); border-radius: 5px 5px 5px 5px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden;
	position: relative;
}

.appmsg_content {
	border-bottom: 1px solid rgb(211, 211, 211); padding: 0; position: relative;
}

.appmsg_info {
	font-size: 13px; line-height: 20px; padding-bottom: 6px; padding-left: 14px; padding-right: 14px; padding-top: 4px;
}

.appmsg_date {
	font-style: normal; font-weight: 400;
}

.cover_appmsg_item {
	margin: 0 14px 14px;; position: relative; display: block; clear: both; float: none
}

.appmsg_thumb_wrp {
	height: 160px; overflow: hidden;
}

.appmsg_thumb {
	width: 100%;
}

.appmsg_item:after {
	clear: both; content: "​"; display: block; height: 0;
}

.appmsg_item {
	height: 110px; border-top: 1px solid rgb(211, 211, 211); padding: 12px 14px; position: relative;
}

.fe {
	position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0 0 rgba(229, 229, 229, 0.85) !important; text-align: center; z-index: 999; line-height: 160px;
}

.fd {
	position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0 0 rgba(229, 229, 229, 0.85) !important; text-align: center; z-index: 999; line-height: 102px;
}

.appmsg_item .appmsg_thumb {
	float: right; height: 78px; margin-left: 14px; width: 78px;
}

.appmsg_title a {
	color: rgb(34, 34, 34); display: block;
}

.cover_appmsg_item .appmsg_title {
	display: block; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6) !important; line-height: 30px; position: relative; width: 100%;
}

.cover_appmsg_item .appmsg_title a {
	color: rgb(255, 255, 255) !important; padding: 0 4px; display: block;
}

.appmsg_item .appmsg_title {
	line-height: 24px; margin-top: 14px; max-height: 48px; overflow: hidden;
}

.appmsg_opr {
	background-color: rgb(244, 244, 244);
}

.appmsg_opr ul {
	overflow: hidden;
}

.appmsg_opr_item {
	float: left; height: 44px; line-height: 44px;
}
-->
</style>
<div class="header">
	<h2>
		图文消息信息<span><font color="red">（* 为必填项）</font> </span>
	</h2>
</div>
<form:form commandName="model" cssClass="validate" id="newsForm"
	action="wechat/news/save">
	<form:hidden path="id" />
	<table class=" form-table">
		<tbody>
			<tr>
				<td class="td1">标题：</td>
				<td class="td2"><form:input path="title" cssClass="required"
						cssStyle="width:300px" />
				</td>
			</tr>
			<tr>
				<td class="td1">类型：</td>
				<td class="td2"><isperp:dictSelector id="typeSelector"
						typeCode="WECHAT_NEWS_TYPE" name="type" dictCssClass="required"
						selectedValue="${model.type }"></isperp:dictSelector></td>
			</tr>
			<tr>
				<td class="td1">排列顺序：</td>
				<td class="td2"><form:input path="orderNum"
						cssClass="required number" /></td>
			</tr>
		</tbody>
	</table>
</form:form>
<br>
<div class="header">
	<h2>图文内容</h2>
	<button onclick="addNewsArticle()">添加图文项目</button>
</div>

<br>
<div style="margin-left:20px;width:400px;">
	<div id="appmsg200159594" class="pp">
		<div class="appmsg multi" data-fileid="200159570" data-id="200159594">
			<div class="appmsg_content">
				<div class="appmsg_info">
					<em class="appmsg_date">${addtime}</em>
				</div>

				<div class="cover_appmsg_item" onmouseover="mouseover('header')"
					onmouseout="mouseout('header')">
					<h4 class="appmsg_title">
						<a target="_blank" href="#">${topArticle.title}</a>
					</h4>
					<div class="appmsg_thumb_wrp">
						<img class="appmsg_thumb" alt="" src="${topArticle.picurl}">
					</div>
					<div class="fe" style="display: none">
						<a class="ui-icon ui-icon-pencil" href="javascript:void(0)"
							onclick="newsArticleUpdate('${topArticle.id}')"></a>
					</div>
				</div>

				<c:forEach items="${articles}" var="art">
					<div class="appmsg_item"
						onmouseover="mouseover('item','${art.id}')"
						onmouseout="mouseout('item','${art.id}')">
						<div id="fd_${art.id}" class="fd" style="display: none">
							<a class="ui-icon ui-icon-pencil " id="edit"
								href="javascript:void(0)"
								onclick="newsArticleUpdate('${art.id}')"></a>&nbsp;&nbsp; <a
								class="ui-icon ui-icon-trash" id="delete"
								href="javascript:void(0)"
								onclick="newsArticleDelete('${art.id}')"></a>
						</div>
						<img class="appmsg_thumb" alt="" src="${art.picurl}">
						<h4 class="appmsg_title">
							<a target="_blank" href="javascript:void(0)">${art.title}</a>
						</h4>
					</div>

				</c:forEach>
			</div>
		</div>

	</div>
</div>

<isperp:buttonList>
	<button class="submit nui-mainbtn" onclick="isperp.submitForm();">保存</button>
</isperp:buttonList>

<script type="text/javascript">
	function addNewsArticle() {
		if (!isperp.submitForm({
			success : function() {
				
			}
		})) {
			return;
		}

		isperp.openDialog({
			onThisWindow:true,
			closeParent:false,
			"contentUrl" : "wechat/newsArticle/edit?newsId=${model.id}"
		});

		
	}
	
	function newsArticleUpdate(id){
		isperp.openDialog({
			id:"newArticleUpdateDialog",
			onThisWindow:true,
			closeParent:false,
			"contentUrl" : "wechat/newsArticle/edit?id="+id
		});

	}
	
	function newsArticleDelete(id){
		
		isperp.confirmAlert('确定删除？<label style="color:red">（数据被删除后无法恢复！）', {
			yes : function() {
				$.post("wechat/newsArticle/delete?id="+id,function(data){
					isperp.reloadPage();
				});
			}
		
		});
		
		
	}
	
	function mouseover(symbol,itemId) {
		if (symbol == 'header') {
			$(".fe").removeAttr("style");
			$(".fd").attr("style", "display:none");
		} else if (symbol == 'item') {
			$(".fe").attr("style", "display:none");
			$("#fd_"+itemId).removeAttr("style");
		}
	}

	function mouseout(symbol,itemId) {
		if (symbol == 'header') {
			$(".fe").attr("style", "display:none");
		} else if (symbol == 'item') {
			$("#fd_"+itemId).attr("style", "display:none");
		}
	}
</script>
